<template>
    <div v-loading="loading">


        <div style="display: flex;">
        <el-card style="width: 20%;margin-left: 120px;" shadow="always" v-for="item in cardData" :key="item.id">
            <div slot="header" class="clearfix">
                <span>{{item.title}}</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="text item">
                <el-tag>{{item.time}}</el-tag>
                <br>
                <br>
                <span>{{item.content}}</span>
                <br>
                <br>
                <el-tag type="success">{{item.author}}</el-tag>
            </div>
        </el-card>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="选择文章" prop="id">
                <el-select v-model="ruleForm.id" placeholder="请选择需要更改的文章">
                    <el-option label="第一篇" value="first"></el-option>
                    <el-option label="第二篇" value="second"></el-option>
                    <el-option label="第三篇" value="third"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="文章标题" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>


            <el-form-item label="编写作者" prop="author">
                <el-input v-model="ruleForm.author"></el-input>
            </el-form-item>


            <el-form-item label="上传时间" prop="time">
                <el-date-picker
                        v-model="ruleForm.time"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>


            <el-form-item label="文章内容" prop="content">
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="ruleForm.content"
                        maxlength="130"
                        show-word-limit
                >
                </el-input>
            </el-form-item>







            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "updateContenxt",
        data(){
            return{
                options: [],
                ruleForm: {
                    id:'',
                    time:'',
                    content:'',
                    title:'',
                    author: '',
                    key:'gonggao'
                },
                rules: {
                    id:[
                        {required:true,message:'请选择需要更改的文章',trigger:'change'}
                    ],
                    author: [
                        { required: true, message: '请输入作者名称', trigger: 'blur' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ],
                    title:[
                        {required:true, message: '请填写文章标题', trigger:'blur'}
                    ],
                    content:[
                        {required:true,message:'请输入文章内容',trigger:'blur'}
                    ],
                    time:[
                        {required:true,message:'请输入编写时间',trigger:'blur'}
                    ]
                },
                cardData:[],
                loading: true
            }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                let keyname={
                    key:'gonggao'
                }
                this.$http({
                    url:'/getWord',
                    method:'get',
                    params:keyname
                }).then(result=>{
                    if(result.status==200){
                        this.cardData=result.data;
                        this.options=result.data;
                        this.loading=false;
                    }
                    console.log(this.options);
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('是否提交!');
                        let addRuleForm={
                            id:0,
                            time:'',
                            content:'',
                            title:'',
                            author: '',
                            key:'gonggao',
                            keyValue:''
                        };
                        if(this.ruleForm.id=='first'){
                            addRuleForm.id=1;
                            addRuleForm.time=this.ruleForm.time;
                            addRuleForm.content=this.ruleForm.content;
                            addRuleForm.title=this.ruleForm.title;
                            addRuleForm.author=this.ruleForm.author;
                            addRuleForm.keyValue=this.ruleForm.id;
                        }else if(this.ruleForm.id=='second'){
                            addRuleForm.id=2;
                            addRuleForm.time=this.ruleForm.time;
                            addRuleForm.content=this.ruleForm.content;
                            addRuleForm.title=this.ruleForm.title;
                            addRuleForm.author=this.ruleForm.author;
                            addRuleForm.keyValue=this.ruleForm.id;
                        }else {
                            addRuleForm.id=3;
                            addRuleForm.time=this.ruleForm.time;
                            addRuleForm.content=this.ruleForm.content;
                            addRuleForm.title=this.ruleForm.title;
                            addRuleForm.author=this.ruleForm.author;
                            addRuleForm.keyValue=this.ruleForm.id;
                        }
                        this.$http({
                            url:'/addContent',
                            method:'post',
                            params:addRuleForm
                        }).then(result=>{
                            console.log(result);
                            if(result.status==200){
                                window.location.reload();
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
.demo-ruleForm{
    margin-top: 50px;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}
</style>
